<template>
  <div :class="[prefixCls, getLayoutContentMode]" v-loading="getOpenPageLoading && getPageLoading">
    <PageLayout />
  </div>
</template>
<script lang="ts">
  import { defineComponent, onMounted } from "vue"
  import PageLayout from "/@/layouts/page/index.vue"
  import { useDesign } from "/@/hooks/web/useDesign"
  import { useRootSetting } from "/@/hooks/setting/useRootSetting"
  import { useTransitionSetting } from "/@/hooks/setting/useTransitionSetting"
  import { useContentViewHeight } from "./useContentViewHeight"
  // import registerApps from '/@/qiankun';
  import { useGlobSetting } from "/@/hooks/setting"
  export default defineComponent({
    name: "LayoutContent",
    components: { PageLayout },
    setup() {
      const { prefixCls } = useDesign("layout-content")
      const { getOpenPageLoading } = useTransitionSetting()
      const { getLayoutContentMode, getPageLoading } = useRootSetting()
      useContentViewHeight()
      return {
        prefixCls,
        getOpenPageLoading,
        getLayoutContentMode,
        getPageLoading,
      }
    },
  })
</script>
<style lang="less">
  @prefix-cls: ~"@{namespace}-layout-content";

  .@{prefix-cls} {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    padding: 10px 10px 10px 10px;
    background-color: @content-bg;

    &.fixed {
      width: 1200px;
      margin: 0 auto;
    }

    &-loading {
      position: absolute;
      top: 200px;
      z-index: @page-loading-z-index;
    }
  }

  html[data-theme="dark"] {
    .@{prefix-cls} {
      background: transparent;
    }
  }
</style>
